<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="demo/layout1">
    <div th:fragment="content">
        <div>
            <div class="queryBlock">
                <select id="orderStr" name="orderStr">
                    <option value="">无</option>
                    <option th:selected="${orderStr == 'price'}" value="price">单价</option>
                    <option th:selected="${orderStr == 'saledate'}" value="saledate">销售日期</option>
                </select>
                <input type="button" value="提交" onclick="querySaleList()"/>
            </div>
            <table border="1">
                <thead>
                    <tr>
                        <td>序号</td>
                        <td>id</td>
                        <td>用户名</td>
                        <td>产品名</td>
                        <td>price</td>
                        <td>quantity</td>
                        <td>totalprice</td>
                        <td>saledate</td>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="sale,saleStat : ${pageInfo.records}">
                        <td th:text="${(pageInfo.current - 1) * pageInfo.size + saleStat.index + 1}"></td>
                        <td th:text="${sale.id}"></td>
                        <td th:text="${sale.realname}"></td>
                        <td th:text="${sale.productname}"></td>
                        <td th:text="${sale.price}"></td>
                        <td th:text="${sale.quantity}"></td>
                        <td th:text="${sale.totalprice}"></td>
                        <td th:text="${#dates.format(sale.saledate,'yyyy-MM-dd HH:mm:ss')}"></td>
                    </tr>
              </tbody>
            </table>
        </div>
        <div class="pageInfo" th:object="${pageInfo}">
            <span th:text="|总记录数:*{total}，每页记录数:*{size}，当前页:*{current}，总页:${pageInfo.getPages()}|">0</span>
            <div>
                <ul class="pageUl">
                    <li>
                        <a th:onclick="|toSalePage('@{/sale/toMainXsList?current=1}')|">首页</a>
                    </li>
                    <li th:if="${pageInfo.hasPrevious()}">
                        <a th:onclick="|toSalePage('@{/sale/toMainXsList(current=${pageInfo.current - 1})}')|">上一页</a>
                    </li>
                    <li th:each="pageNum:${#numbers.sequence(1, pageInfo.getPages())}">
                        <a th:onclick="|toSalePage('@{/sale/toMainXsList(current=${pageNum})}')|" th:text="'&nbsp;&nbsp;'+${pageNum}" th:class="${pageNum == pageInfo.getCurrent() ? 'active' : ''}"></a>
                    </li>
                     <li th:if="${pageInfo.hasNext()}">
                        <a th:onclick="|toSalePage('@{/sale/toMainXsList(current=${pageInfo.current + 1})}')|">下一页</a>
                    </li>
                    <li>
                        <a th:onclick="|toSalePage('@{/sale/toMainXsList(current=${pageInfo.getPages()})}')|">尾页</a>
                    </li>
                </ul>
            </div>
        </div>

        <style>
            table tr td{
                border: 1px solid gray;
            }
            ul li{
                float: left;
            }
            .pageUl a{
                border: 1px solid black;
                margin: 5px;
            }
            .active{
                font-weight:bold;
                background: grey;
            }
        </style>
        <script>
            function toSalePage(url){
                let orderStr = $("#orderStr").val();
                if(orderStr){
                    url = url + '&orderStr=' +orderStr;
                }
                window.location.href = url;
            }
            function querySaleList(){
                debugger;
                let orderStr = $("#orderStr").val();

                if(orderStr){
                    location.href = "/sale/toMainXsList?orderStr="+orderStr;
                }else{
                    alert("请选择排序条件.");
                }

            }
        </script>
    </div>
</html>